<template>
  <div class="watch">
    <p>watch vs watchEffect</p>
    <p>{{ numberRef }}</p>
    <p>{{ name }} {{ age }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs, watch, watchEffect } from 'vue';

export default defineComponent({
  name: 'WatchView',
  props: {
  },
  setup() {
    const numberRef = ref(100)
    const state = reactive({
      name: 'ionluo',
      age: 20
    })

    // 1. watch 监听 ref
    watch(numberRef, (newVal, oldVal) => {
      // 注意这里newVal和oldVal就不需要 .value 了
      console.log('ref watch', newVal, oldVal)
    })

    // 2. watch 监听 reactive
    watch(
      // 第一个参数，确定要监听哪个属性
      () => state.age,
      // 第二个参数，回调函数
      (newVal, oldVal) => {
        console.log('state watch', newVal, oldVal)
      },
      // // 第三个参数，配置项（可选，和vue2一样）
      // {
      //   immediate: true, // 初始之前就监听
      //   deep: true // 深度监听
      // }
    )

    // 3. watchEffect 监听
    watchEffect(() => {
      // 初始化时一定会执行一次（收集需要监听的数据）
      console.log('numberRef watchEffect', numberRef.value)
      console.log('state.name watchEffect', state.name)
    })

    setTimeout(() => {
      numberRef.value = 200
      state.age = 25
    }, 1500)

    return {
      numberRef,
      ...toRefs(state)
    }

  }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>